<template>
  <el-dialog
    :visible.sync="$store.state.dias.bankcard.show"
    width="500px"
    center
    class="bank-card"
    >
    <main>
      <div v-for="(item, index) in modelData" :key="index" class="box mb20">
        <span class="title">{{item.label}}：</span>
        <el-input v-model="baseInfo[item.prop]" placeholder="" class="" :maxlength="item.max"></el-input>
        <el-button type="primary" v-if="item.button" class="btn" @click="item.button.click">{{item.button.label}}</el-button>
      </div>
    </main>
    <el-button class="submit-btn" type="success" @click="submit">确 定</el-button>
  </el-dialog>
</template>
<script>
export default {
  props:['baseInfo'],
  components: {},
  name: "",
  data() {
    return {
      modelData:[
        {prop:"realName",label:"姓名",},
        {prop:"bankNo",label:"银行卡号",},
        {prop:"phone",label:"手机号",max:11},
        // {prop:"",label:"验证码",button:{label:"获取验证码",click:this.getCheckNum}}
      ]
    };
  },
  methods: {
    /**
     * @name 获取验证码
     */
    getCheckNum(){
      console.log("获取验证码");
    },

    /**
     * @name 提交信息
     */
    submit(){
      this.$store.state.dias.bankcard.show = false
    }
  },
  created() {}
};
</script>
<style lang="scss" scoped>
.bank-card {
  font-size: 14px;
  main{
    padding: 10px 50px 10px 0;
    div.box{
      display: flex;
      line-height: 36px;

      .title{
        display: inline-block;
        min-width: 75px;
        margin-right: 10px;
        text-align: right;
      }
      .btn{
        padding: 0 5px;
        font-size: 12px;
        border-radius: 0;
        margin-left: 10px;
        min-width: 100px;
      }
    }
  }
  .submit-btn{
    width: 170px;
    margin: 20px 105px;
  }
}
</style>